<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>货款计算器</title>
  <style type="text/css">
    table {
      margin: auto;
      border-collapse: collapse;
      width: 280px;
    }

    td {
      border: 1px solid #ccc;
      padding: 8px 8px;
    }

    input {
      width: 72px;
    }

    ol {
      margin: 0;
      line-height: 18px;
      max-height: 90px;
      overflow-y: auto;
    }

    #payment {
      width: 160px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td>贷款总额:</td>
      <td><input type="number" pattern="\d*" min="1" max="1000" id="amount" oninput="calculate();" />(万)</td>
    </tr>
    <tr>
      <td>贷款利率:</td>
      <td><input type="number" pattern="\d*" min="1" max="36" id="apr" oninput="calculate();" />(%)</td>
    </tr>
    <tr>
      <td>贷款期限:</td>
      <td><input type="number" pattern="\d*" min="1" max="30" id="month" oninput="calculate();" />(月)</td>
    </tr>
    <tr>
      <td>还款方式:</td>
      <td>
        <select id="type" onchange="calculate();">
          <option value="0" selected>等额本息</option>
          <option value="1">等额本金</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>还款总额:</td>
      <td id="total"></td>
    </tr>
    <tr>
      <td>支付利息:</td>
      <td id="totalinterest"></td>
    </tr>
    <tr>
      <td>每月还款:</td>
      <td>
        <div id="payment"></div>
      </td>
    </tr>
  </table>
  <script>
    "use strict";

    function $(id) {
      return document.getElementById(id);
    }

    function calculate() {
      var amount = $("amount").value,
        apr = $("apr").value,
        month = $("month").value,
        type = $("type").value,
        payment = $("payment"),
        total = $("total"),
        totalinterest = $("totalinterest"),
        principal = amount * 10000,
        interest = apr / 100 / 12,
        payments = parseInt(month);

      if (!principal || !interest || !payments) {
        payment.innerHTML = "";
        total.innerHTML = "";
        totalinterest.innerHTML = "";
        return
      }
      save(amount, apr, month, type);
      if (type === '0') {
        var x = Math.pow(1 + interest, payments)
        var monthly = (principal * x * interest) / (x - 1)
        payment.innerHTML = monthly.toFixed(2)
        total.innerHTML = (monthly * payments).toFixed(2)
        totalinterest.innerHTML = ((monthly * payments) - principal).toFixed(2)

      } else {
        var monthly = principal / payments
        var payment_totalinterest = (payments + 1) / 2 * principal * interest
        totalinterest.innerHTML = payment_totalinterest.toFixed(2)
        total.innerHTML = (payment_totalinterest + principal).toFixed(2)
        payment.innerHTML = `<ol>${' '.repeat(payments).split('').map((v, i) => {
          return `<li>${(monthly + (payments - i) / payments * principal * interest).toFixed(2)}</li>`
        }).join('')}</ol>`
      }

    }

    function save(amount, apr, month, type) {
      if (window.localStorage) {
        localStorage.loan_amount = amount;
        localStorage.loan_apr = apr;
        localStorage.loan_month = month;
        localStorage.loan_type = type;
      }
    }

    window.onload = function () {
      if (location.search) {
        var data = location.search.substr(1).split('&')
        $("amount").value = data[0] || 0
        $("apr").value = data[1] || 0
        $("month").value = data[2] || 0
        $("type").value = data[3] || 0
        calculate()
      } else if (window.localStorage && localStorage.loan_amount) {
        $("amount").value = localStorage.loan_amount;
        $("apr").value = localStorage.loan_apr;
        $("month").value = localStorage.loan_month;
        $("type").value = localStorage.loan_type;
        calculate()
      }
    }
  </script>
</body>

</html>